<template>
	<view class="worker">
		<u-tabs
			lineWidth="30"
			lineColor="#F14537"
			:list="workerTabList"
			@click="tabClick"
			itemStyle="padding-left: 18px; padding-right: 18px; height: 42px;"
			:activeStyle="{
				color: '#F14537',
				fontWeight: 'bold',
				transform: 'scale(1.05)'
			}"
			:inactiveStyle="{
				color: '#999999',
				transform: 'scale(1)'
			}"
		></u-tabs>
		<view class="h76 dis_f jcsa fz26 tf_33 border_b4 border_t3">
			<view class="dis_f" @click="areaFilterPopshow = true">
				<text>地区</text>
				<image class="w16 ml12" src="../../static/image/shaixuan.png" mode="widthFix"></image>
			</view>
			<view class="dis_f" @click="workerFilterPopshow = true">
				<text>筛选</text>
				<image class="w16 ml12" src="../../static/image/shaixuan.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="" v-for="(item, index) in worker_list" :key="index" @click="goWorkerDetail(item)">
			<view class="dis_f ml30 mr30 pt34">
				<view class="w160 h160 radius16"><image class="w160 h160 radius16" :src="item.avatar_image" mode="aspectFill"></image></view>
				<view class="ml24">
					<view class="dis_f">
						<text class="fz32 fw">{{ item.name }}</text>
						<view class="ml12"><u-rate :count="xincount" size="12" readonly :value="item.star" active-color="#FF970E"></u-rate></view>
					</view>
					<view class="fz24 tf_33 mt15">
						<text>{{ item.age }}岁</text>
						<text class="tf_999 ml10 mr10">|</text>
						<text v-if="item.exp">{{ item.exp }}年经验</text>
						<text v-else>0年经验</text>
					</view>
					<view v-if="item.introduction" style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;max-width: 504rpx;" class="mt15 fz24 tf_999">{{ item.introduction }}</view>
				</view>
			</view>
			<view class="bac_e7 h1 mr30 ml30 mt30"></view>
		</view>
		<view v-show="is_last" class="w tf_999 fz28 tac mt24 mb24">已经触碰到底线了~</view>
		<!-- 弹出窗 -->
		<u-popup :show="workerFilterPopshow" mode="top" @close="workerFilterPopshow = false" :round="8">
			<view class="pop-cart radius_5">
				<view>
					<view class="dis_flex ml24 mr30 mt20 pb20">
						<view class="bac_f7 radius32 h64 dis_f w">
							<u--input
								placeholder="请输入姓名进行搜索"
								prefixIcon="search"
								border="none"
								v-model="search_info"
								prefixIconStyle="font-size: 22px;color: #909399;margin-left:30rpx"
							></u--input>
						</view>
					</view>
					<view class="ml30 mr30 mt24">
						<text class="fz26 tf_999">年龄</text>
						<view class="dis_f jcsb">
							<view
								class="h80 bz bac_f8 dis_f jc radius6 mt24 fz28 tf_33"
								style="width: 216rpx"
								v-for="(item, index) in filter_o"
								:key="index"
								@click="filterO(index)"
								:class="{ active: filtero_id == item.id }"
							>
								{{ item.title }}
							</view>
						</view>
					</view>
					<view class="ml30 mr30 mt24">
						<text class="fz26 tf_999">工龄</text>
						<view class="dis_f jcsb">
							<view
								class="h80 bz bac_f8 dis_f jc radius6 mt24 fz28 tf_33"
								style="width: 216rpx"
								v-for="(item, index) in filter_s"
								:key="index"
								@click="filterS(index)"
								:class="{ active: filters_id == item.id }"
							>
								{{ item.title }}
							</view>
						</view>
					</view>
					<view class="ml30 mr30 mt24">
						<text class="fz26 tf_999">性别</text>
						<view class="dis_f">
							<view
								class="h80 bz bac_f8 dis_f jc radius6 mt24 mr20 fz28 tf_33"
								style="width: 216rpx"
								v-for="(item, index) in sex"
								:key="index"
								@click="sexCli(index)"
								:class="{ active: sex_id == item.id }"
							>
								{{ item.name }}
							</view>
						</view>
					</view>
					<view class="dis_f ml30 mr30">
						<view class="dfd_c ac" @click="clear">
							<image src="../../static/image/back-icon.png" class="w40 h40" mode="widthFix"></image>
							<view class="fz22 mt10">重置</view>
						</view>
						<view class="w592 btn ml40 radius8 mt48 tf h88 dis_f jc fz32 mb40" @click="submitInfo">确定</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 城市选择器 -->
		<u-picker
			:show="areaFilterPopshow"
			ref="uPicker"
			:columns="columns"
			confirmColor="#f14537"
			cancelColor="#f14537"
			@cancel="areaFilterPopshow = false"
			@confirm="confirm"
			@change="changeHandler"
		></u-picker>
	</view>
</template>

<script>
import { getCityInfo, getStreetInfo, getWorkerInfo } from '@/config/api.js';
export default {
	data() {
		return {
			ReachBottom:true,
			is_last: false,
			last_page: '', //总共页数
			page: 1,
			c_sex: '',
			c_age: '',
			c_exp: '',
			search_info: '',
			worker_list: [],
			tab_id: 1,
			city: '',
			district: '',
			sex: [
				{
					id: 1,
					name: '男'
				},
				{
					id: 2,
					name: '女'
				}
			],
			sex_id: '',
			filter_o: [
				{
					id: 1,
					title: '35岁以下'
				},
				{
					id: 2,
					title: '35-45岁'
				},
				{
					id: 3,
					title: '45岁以上'
				}
			],
			filter_s: [
				{
					id: 1,
					title: '1年以下'
				},
				{
					id: 2,
					title: '1-2年'
				},
				{
					id: 3,
					title: '2年以上'
				}
			],
			filtero_id: '',
			filters_id: '', //筛选区域
			areaFilterPopshow: false,
			workerFilterPopshow: false,
			columns: [], //地区
			columnData: [],
			xincount: '5',
			xinscore: '4',
			workerTabList: [
				{
					name: '月嫂'
				},
				{
					name: '清洁工'
				},
				{
					name: '护工'
				},
				{
					name: '维修工'
				},
				{
					name: '育儿嫂'
				}
			]
		};
	},
	onLoad() {
		this.getCityInfo();
		this.getWorkerInfo();
	},
	//触底加载
	onReachBottom() {
		if(this.ReachBottom){
			console.log('之前的数据', this.worker_list);
			let type = this.cur_type + 1;
			if (this.page < this.last_page) {
				this.page = this.page + 1;
				console.log('page', this.page);
				getWorkerInfo({
					page: this.page,
					type: type
				}).then(res => {
					console.log('触底加载的数据', res);
					res.list.forEach(v => {
						this.worker_list.push(v);
					});
				});
			} else {
				this.is_last = true;
			}
			console.log(this.worker_list);
		}
	},
	methods: {
		//点击切换tab
		tabClick(item) {
			this.ReachBottom = true
			console.log(item);
			let type = item.index + 1;
			this.tab_id = type;
			getWorkerInfo({
				page: 1,
				type: type
			}).then(res => {
				console.log(res);
				this.worker_list = res.list;
				this.last_page = res.last_page;
			});
		},
		//加载员工信息
		getWorkerInfo() {
			getWorkerInfo({
				page: 1,
				type: 1
			}).then(res => {
				console.log(res);
				this.worker_list = res.list;
				this.last_page = res.last_page;
			});
		},
		//重置筛选项
		clear() {
			this.sex_id = '';
			this.filtero_id = '';
			this.filters_id = '';
			this.c_sex = '';
			this.c_age = '';
			this.c_exp = '';
			this.search_info = ''
		},
		//提交筛选项
		submitInfo() {
			let page = 'all';
			let type = this.tab_id;
			let wname = this.search_info;
			let age = this.c_age;
			let exp = this.c_exp;
			let sex = this.c_sex;
			let city = this.city;
			let district = this.district;
			console.log(this.page);
			getWorkerInfo({
				page: page,
				type: type,
				name: wname,
				age: age,
				exp: exp,
				sex: sex,
				city: city,
				district: district
			}).then(res => {
				if (res.length != 0) {
					this.worker_list = res.list;
				} else {
					this.worker_list = [];
				}
			});
			this.workerFilterPopshow = false;
			this.ReachBottom = false
			this.is_last = true
		},
		//sex点击
		sexCli(index) {
			this.sex_id = this.sex[index].id;
			if (this.sex[this.sex_id - 1].name) {
				this.c_sex = this.sex[this.sex_id - 1].name;
			} else {
				this.c_sex = '';
			}
		},
		//筛选项点击
		filterO(index) {
			console.log(index);
			this.filtero_id = this.filter_o[index].id;
			if (this.filter_o[this.filtero_id - 1].title) {
				this.c_age = this.filter_o[this.filtero_id - 1].title;
			} else {
				this.c_age = '';
			}
		},
		filterS(index) {
			this.filters_id = this.filter_s[index].id;
			if (this.filter_s[this.filters_id - 1].title) {
				this.c_exp = this.filter_s[this.filters_id - 1].title;
			} else {
				this.c_exp = '';
			}
		},
		//筛选地区
		getCityInfo() {
			getCityInfo().then(res => {
				this.columns = res;
			});
			getStreetInfo().then(res => {
				this.columnData = res;
			});
		},
		changeHandler(e) {
			const {
				columnIndex,
				value,
				values, // values为当前变化列的数组内容
				index,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.uPicker
			} = e;
			// 当第一列值发生变化时，变化第二列(后一列)对应的选项
			if (columnIndex === 0) {
				// picker为选择器this实例，变化第二列对应的选项
				picker.setColumnValues(1, this.columnData[index]);
			}
		},
		// 回调参数为包含columnIndex、value、values
		confirm(e) {
			console.log('confirm', e);
			this.areaFilterPopshow = false;
			this.city = e.value[0];
			this.district = e.value[1];
			getWorkerInfo({
				page: 'all',
				type: this.tab_id,
				city: this.city,
				district: this.district
			}).then(res => {
				if (res.length != 0) {
					this.worker_list = res.list;
				} else {
					this.worker_list = [];
				}
				this.is_last = true
				this.ReachBottom = false
			});
		},
		//跳转工作人员详情
		goWorkerDetail(e) {
			console.log(e);
			uni.navigateTo({
				url: '../workerDetail/workerDetail?worker_id=' + e.id
			});
		}
	}
};
</script>

<style lang="scss">
.active {
	border: 1px solid #f14537;
	color: #f14537;
	background-color: rgba(241, 69, 55, 0.05);
}

page {
	background-color: #fff;
}
</style>
